<template>
  <div>
    监听简单数据
    <div>
      <button @click="handleCount">count is {{ count }}</button>
    </div>
    深监听数据
    <div>
      <button @click="handlePerson">姓名：{{ person.name }} 年龄：{{ person.age }}</button>
    </div>
  </div>
</template>

<script setup>
import { watch, ref } from 'vue';

const count = ref(0);
const person = ref({
  name: 'zhangsan',
  age: 18
});

// 监听简单数据
const handleCount = () => {
  count.value++;
};

watch(count, (newValue, oldValue) => {
  console.log("count 旧数据: " + oldValue);
  console.log("count 新数据: " + newValue);
});

// 深监听数据
const handlePerson = () => {
  person.value = {
    name: 'lisi',
    age: 19
  };
  // person.value.name = 'lisi';
  // person.value.age = 19;


};

watch(
  person,
  (newValue, oldValue) => {
    console.log("name 旧数据: " + oldValue.name);
    console.log("name 新数据: " + newValue.name);
    console.log("age 旧数据: " + oldValue.age);
    console.log("age 新数据: " + newValue.age);
  },
  { deep: true }
);
</script>